<!--
  ~ Copyright (c) 2014-2020 Bjoern Kimminich.
  ~ SPDX-License-Identifier: MIT
  -->

<div fxLayout="row" fxLayoutGap="5%" fxLayout.lt-md="column" fxLayoutGap.lt-md="20px" class="main-wrapper">
  <div fxLayout="column" fxLayoutGap="20px" fxFlex="50%">
    <div class="table-container custom-slate mat-elevation-z6">

      <div class="heading">
        <div>{{"TITLE_TRACK_ORDERS" | translate}}</div>
      </div>

      <mat-table [dataSource]="orderSource">
        <ng-container matColumnDef="OrderId">
          <mat-header-cell *matHeaderCellDef translate="LABEL_ORDER_ID" fxFlex="50%"></mat-header-cell>
          <mat-cell *matCellDef="let element" fxFlex="50%"> {{element.orderId }}</mat-cell>
        </ng-container>

        <ng-container matColumnDef="Price">
          <mat-header-cell *matHeaderCellDef translate="LABEL_PRICE" fxFlex="15%"></mat-header-cell>
          <mat-cell *matCellDef="let element" fxFlex="15%"> {{element.totalPrice?.toFixed(2) }}&curren;</mat-cell>
        </ng-container>

        <ng-container matColumnDef="Status">
          <mat-header-cell *matHeaderCellDef translate="LABEL_STATUS" fxFlex="20%"></mat-header-cell>
          <mat-cell *matCellDef="let element" fxFlex="20%">
            <div *ngIf="!element.delivered" class="error" translate>LABEL_IN_TRANSIT</div>
            <div *ngIf="element.delivered" class="confirmation" translate>LABEL_DELIVERED</div>
          </mat-cell>
        </ng-container>

        <ng-container matColumnDef="StatusButton">
          <mat-header-cell *matHeaderCellDef fxFlex="15%"></mat-header-cell>
          <mat-cell *matCellDef="let element" fxFlex="15%">
            <button *ngIf="element.delivered" mat-icon-button aria-label="Print order confirmation"
                    matTooltip="{{ 'LABEL_MARK_AS_TRANSIT' | translate }}" matTooltipPosition="below"
                    (click)="changeDeliveryStatus(element.delivered, element.id)">
              <mat-icon>
                cached
              </mat-icon>
            </button>
            <button *ngIf="!element.delivered" mat-icon-button aria-label="Print order confirmation"
                    matTooltip="{{ 'LABEL_MARK_AS_DELIVERED' | translate }}" matTooltipPosition="below"
                    (click)="changeDeliveryStatus(element.delivered, element.id)">
              <mat-icon>
                check_circle
              </mat-icon>
            </button>
          </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="orderHistoryColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: orderHistoryColumns;"></mat-row>

      </mat-table>

      <mat-divider></mat-divider>

      <mat-paginator class="mat-elevation-z6"
                     #paginatorOrderHistory
                     [pageSize]="10"
                     [pageSizeOptions]="[10, 20, 30]">
      </mat-paginator>
    </div>
  </div>

  <div fxFlex="50%">
    <div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="center">
      <div class="table-container custom-slate mat-elevation-z6">

        <div class="heading">
          <div>{{"TITLE_ALL_PRODUCTS" | translate}}</div>
          <div *ngIf="confirmation" style="margin-top:5px;">
            <p class="confirmation">{{ confirmation }}</p>
          </div>
          <div *ngIf="error" style="margin-top:5px;">
            <p class="error">{{error?.error}}</p>
          </div>
        </div>

        <mat-table [dataSource]="dataSource">
          <ng-container matColumnDef="Product">
            <mat-header-cell *matHeaderCellDef translate="LABEL_PRODUCT" fxFlex="50%"
                             fxFlex.lt-md="50%"></mat-header-cell>
            <mat-cell *matCellDef="let element" fxFlex="50%" fxFlex.lt-md="50%"> {{element.name}}</mat-cell>
          </ng-container>

          <ng-container matColumnDef="Price">
            <mat-header-cell *matHeaderCellDef translate="LABEL_PRICE" fxFlex="25%"
                             fxFlex.lt-md="25%"></mat-header-cell>
            <mat-cell *matCellDef="let element" fxFlex="25%" fxFlex.lt-md="25%">
              <mat-form-field class="input-field">
                <input #price matInput type="number" value="{{ element.price }}">
                <button mat-icon-button (click)="modifyPrice(element.id, price.value)" matSuffix><i
                  class="fas fa-check"></i></button>
              </mat-form-field>
            </mat-cell>
          </ng-container>

          <ng-container matColumnDef="Quantity">
            <mat-header-cell *matHeaderCellDef translate="LABEL_QUANTITY" fxFlex="25%"
                             fxFlex.lt-md="25%"></mat-header-cell>
            <mat-cell *matCellDef="let element" fxFlex="25%" fxFlex.lt-md="25%">
              <mat-form-field class="input-field">
                <input #quanitity matInput type="number" value="{{ quantityMap[element.id].quantity }}">
                <button mat-icon-button (click)="modifyQuantity(quantityMap[element.id].id, quanitity.value)" matSuffix>
                  <i class="fas fa-check"></i></button>
              </mat-form-field>
            </mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

        </mat-table>

        <mat-divider></mat-divider>

        <mat-paginator class="mat-elevation-z6"
                       #paginator
                       [pageSize]="10"
                       [pageSizeOptions]="[10, 20, 30]">
        </mat-paginator>
      </div>
    </div>
  </div>
</div>
